<html>

<head>
    <meta charset="utf-8">
    <title>Shooter Example — Networked-Aframe</title>
    <meta name="description" content="Shooter Example — Networked-Aframe">
    <!-- 依赖库 -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <script src="./js/package/aframe-physics-system.js"></script>
    <!-- START -->
    <!-- 这个版本BUG，THREE.Geometry is not a constructor。注意上面那个aframe-physics-system本地包会一直更新 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/aframe-physics-system@4.0.1/dist/aframe-physics-system.min.js"></script> -->
    <!-- 参见 -->
    <!-- https://github.com/n5ro/aframe-physics-system/issues/187 -->
    <!-- https://github.com/gearcoded/aframe-physics-system/blob/master/dist/aframe-physics-system.js -->
    <!-- END -->
    <!-- 工具 -->
    <script src="./js/utils/utils.js"></script>

    <!-- 组件 -->
    <!-- 通用组件 -->
    <script src="./js/component/random-color.component.js"></script>
    <script src="./js/component/random-position.component.js"></script>
    <script src="./js/component/random-size.component.js"></script>
    <script src="./js/component/remove-in-seconds.component.js"></script>
    <script src="./js/component/drop-down.component.js"></script>
    <!-- 专用组件 -->
    <script src="./js/objects/forward.objects.js"></script>
    <script src="./js/objects/gun.objects.js"></script>
    <script src="./js/objects/balloon.objects.js"></script>
    <script src="./js/objects/sphere-test.objects.js"></script>

</head>

<body>
    <a-scene networked-scene="room: shooter;debug: true;" physics="gravity:-9.8;restitution:3">
        <a-assets>
            <img id="ground" src="./assets/images/floor-perfect.jpg">

            <!-- <img id="sky" src="assets/images/sky.jpg" /> -->
            <!-- <img id="grid" src="assets/images/floor-perfect.jpg"> -->
            <a-asset-item id="scoreboard" src="./assets/models/objects/scoreboard.glb"></a-asset-item>

            <template id="avatar-template">
                <a-entity class="avatar">
                    <a-sphere class="head" scale="0.45 0.5 0.4"></a-sphere>
                    <a-entity class="face" position="0 0.05 0">
                        <a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                            <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
                        </a-sphere>
                        <a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                            <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
                        </a-sphere>
                    </a-entity>
                    <a-entity class="gun">
                        <a-box position="0.51 -0.13 -0.29" scale="0.19 0.23 0.67" color="#000"></a-box>
                        <a-entity class="gun-tip" position="0.51 -0.10 -0.64"></a-entity>
                    </a-entity>
                </a-entity>
            </template>

            <!-- 紫球 -->
            <template id="purple-template">
                <a-entity class="purple">
                    <a-sphere color="#AA00FF" radius="0.5" position="1 6 -4"
                        dynamic-body="linearDamping: 0.5;angularDamping:0.3;mass:10">
                    </a-sphere>
                </a-entity>
            </template>
            <!-- 黄球 -->
            <template id="yellow-template">
                <a-entity class="yellow">
                    <a-sphere color="#FFAA00" radius="0.5" position="1 4 -4" drop-down static-body>
                    </a-sphere>
                </a-entity>
            </template>
        </a-assets>

        <!-- Ground -->
        <a-plane src="#ground" scale="50 50 1" repeat="10 10 10" rotation="-90 0 0" static-body>
        </a-plane>

        <!-- 人物 -->
        <a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" camera
            position="0 1.6 0" wasd-controls look-controls>
            <a-sphere class="head" visible="false" random-color></a-sphere>
        </a-entity>

        <!-- 测试用的球 -->
        <a-entity id="purple" networked="template:#purple-template;attachTemplateToLocal:false;"></a-entity>
        <a-entity id="yellow" networked="template:#yellow-template;attachTemplateToLocal:false;"></a-entity>

    </a-scene>
    <script>
        // Define custom schema for syncing avatar color, set by random-color
        // 人物同步  
        NAF.schemas.add({
            template: '#avatar-template',
            components: [
                'position',
                'rotation',
                {
                    selector: '.head',
                    component: 'material',
                    property: 'color'
                }
            ]
        });

        NAF.schemas.add({
            template: '#purple-template',
            components: [
                'position',
                'rotation',
                // {
                //     selector: '.head',
                //     component: 'material',
                //     property: 'color'
                // }
            ]
        });


    </script>
    <script>
        const test = function () {
            setTimeout(() => {
                const score_you = document.querySelector('#score_left');
                console.log('score_left', score_you);
                const text = score_you.getAttribute('text');
                console.log('text', text);
                setTimeout(() => {
                    score_you.setAttribute('text', {
                        value: 10
                    });
                    const text2 = score_you.getAttribute('text');
                    console.log('text after', text2);
                    console.log('score_left', score_you);
                }, 3000);
            }, 10000)
        };

    </script>
</body>

</html>